<template>
	<div class="info-box">
		<div class="info-header">
			<img v-lazy="proDetailData.large_img" :alt="proDetailData.name" class="info-header__image">
		</div>
		<div class="info-content">
			<div class="info-content__box">
				
				<div class="pro-title">
					<div class="pro-title__l">
						<div class="name Text_abb">{{proDetailData.name}}</div>
						<div class="enname Text_abb">{{proDetailData.enname}}</div>
					</div>
					<div class="pro-title__r">￥{{ proDetailData.price }}</div>
				</div>
				
				<div class="pro-rule">
					<div 
						class="pro-rule-item" 
						v-for="(item,index) in proDetailData.rules" 
						:key="index"
					>
						<div class="rule-title">{{item.title}}</div>
						<div class="rule-label">
							<div 
								:class="['rule-label-item', item.ruleIndex === i ? 'active' : '']" 
								v-for="(label,i) in item.rule" 
								:key="i"
								@click="toggleRule(item,i)"
							>{{label.title}}</div>
						</div>
					</div>
				</div>
				
				<div class="quantity">
					<div class="select-count">购买数量</div>
					<div class="count-box">
						<van-stepper 
							disable-input
							:value="selectCount"
							@change="changedCount"
						>
						</van-stepper>
					</div>
				</div>
				
				<div class="desc-box">
					<div class="desc-title">商品描述</div>
					<div class="desc-text">
						<p 
							v-for="(item,index) in proDetailData.desc"
							:key="index"
						>
							{{index + 1}}.{{item}}
						</p>
					</div>
				</div>
				
			</div>
		</div>
	</div>
</template>

<script>
	import { mapState } from 'vuex'
	import { getProDetail } from '@/api/detail.js'
	import bus from '@/utils/eventBus.js'
	export default {
		data () {
			return {
			}
		},
		created() {
			const pid = this.$route.params.pid
			this._getProDetailById(pid)
		},
		// 开启路由缓存后使用这个钩子每次进入都会调用
		activated() {
			if(this.keepAlive) {
				const pid = this.$route.params.pid
				this._getProDetailById(pid)
				this.$store.dispatch('set_select_count', 1)
			}
		},
		methods: {
			// 获取详情
			_getProDetailById(pid) {
				this.$toast.loading({
					message: '加载中···',
					forbidClick: true
				})
				getProDetail({
					pid
				})
				.then(({data: res}) => {
					if (res.code !== 600) return this.$toast.fail('请求异常,请重新尝试!')
					let data = res.result[0]
					// 字符串根据空格切割为数组
					data.desc = data.desc.split(/\n/)
					let rules = []
					let ruleData = ['tem', 'sugar', 'milk', 'cream']
					ruleData.forEach(item => {
						let r = {}
						r.title = data[item + '_desc']
						r.ruleIndex = 0
						r.rule = []
						let ruleString = data[item].split('/')
						ruleString.forEach(value => {
							if (value) {
								r.rule.push({title: value})
							}
						})
						if (r.rule.length) {
							rules.push(r)
						}
					})
					data.rules = rules
					this.$store.dispatch('set_prod_etail', data)
					// this.proDetailData = data
					this.$toast.clear()
					this.keepAlive = true
				})
				.catch(err => {
					this.$toast.fail('请求失败,请重新尝试!')
				})
			},
			// 切换 label
			toggleRule(item, i) {
				if (item.ruleIndex === i) return
				item.ruleIndex = i
			},
			// 改变购买数量
			changedCount(value) {
				this.$store.dispatch('set_select_count', value)
			}
		},
		computed: {
			// proDetailData 购物产品详情信息
			// selectCount 商品购买数量
			...mapState(['proDetailData','selectCount'])
		}
	}
</script>

<style lang="scss" scoped>
	.info-box{
		.info-header{
			min-height: 270px;
			img {
				width: 100%;
			}
		}
		.info-content{
			position: relative;
			z-index: 2;
			background-color: #fff;
			width: 95%;
			box-sizing: border-box;
			margin: -20px auto 0;
			border-radius: 12px;
			box-shadow: 1px 3px 4px 2px #ccc;
			padding: 1px 15px;
			.info-content__box{
				>div{
					padding: 15px 0;
					border-bottom: 1px solid #f1f1f19d;
					&:last-of-type{border: none;}
				}
				.pro-title{
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 16px;
					.pro-title__l{
						width: 250px;
						.name{
							font-size: 18px;
							font-weight: bold;
						}
						.enname{
							color: gray;
							line-height: 18px;
						}
					}
					.pro-title__r{
						color: #3498db;
						font-weight: bolder;
					}
				}
				.pro-rule{
					.pro-rule-item{
						margin-bottom: 10px;
						display: flex;
						align-items: center;
						.rule-title{
							width: 45px;
							text-align: left;
						}
						.rule-label{
							margin-left: 15px;
							display: flex;
							.rule-label-item{
								background-color: #c2c2c2;
								width: 60px;
								height: 30px;
								line-height: 30px;
								text-align: center;
								border-radius: 30px;
								margin: 0 5px;
								font-size: 12px;
								box-sizing: border-box;
								&.active{
									background-color: #3498db;
									color: white;
								}
							}
						}
					}
				}
				.quantity{
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
				.desc-box{
					.desc-title{
						margin-bottom: 5px;
						font-size: 16px;
					}
					.desc-text{
						font-size: 12px;
						color: #bdc3c7;
						line-height: 16px;
					}
				}
			}
		}
	}
</style>